<template>
    <div class="admin">
        <Crumb></Crumb>
        <div class="admin-in">
            <div class="seach">
                <div class="sx">
                    <div> <el-icon style="vertical-align: middle">
                            <Search />
                        </el-icon> <span>筛选搜索</span> </div>
                    <div> <el-button>重置</el-button>
                        <el-button type="primary" @click="seachFn">查询搜索</el-button>
                    </div>
                </div>
                <div class="user">账号/姓名: <el-input class="inp" v-model="input.keyword" placeholder="请输入账号、姓名" /></div>
            </div>
            <div class="sj">
                <div class="sj-in">
                    <div><el-icon style="vertical-align: middle">
                            <Tickets />
                        </el-icon>数据列表
                    </div>
                    <el-button type="primary" @click="addFn" v-permission="'addUser'">添加</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="编号" width="60px" />
                <el-table-column prop="username" label="账号" />
                <el-table-column prop="nickName" label="姓名" />
                <el-table-column prop="email" label="邮箱" width="220px" />
                <el-table-column label="添加时间">
                    <template #default="{ row }">
                        {{ dayjs(row.createTime).format('YYYY/MM/DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="最后登录">
                    <template #default="{ row }">
                        {{ row.loginTime ? dayjs(row.loginTime).format('YYYY/MM/DD HH:mm:ss') : "" }}
                    </template>
                </el-table-column>
                <el-table-column label="是否启用">
                    <template #default="{ row }">
                        <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="changeStatus(row)" />
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button link type="primary" size="small" @click="editFn(row.id)">编辑角色</el-button>
                        <el-button link type="primary" size="small" @click="fpFn(row.id)">分配角色</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageparams.currentPage" v-model:page-size="pageparams.pageSize"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageparams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <edit :dialogVisible="dialogVisible" @cancel="cancelfn" @confirm="confirmfn" :edID="edID"></edit>
        <assing :assignID="assignID" :showFormVisible="showFormVisible" @qd="qdfn" @qx="qxfn"></assing>
    </div>
</template>

<script setup lang="ts">
import assing from "@/views/assign.vue"
import edit from "../edit.vue"
import Crumb from "@/components/Crumb.vue"
import { Search, Tickets } from '@element-plus/icons-vue'
import { dayjs, ElMessage } from 'element-plus'
import * as http from "@/request/http"
import { useTable } from "@/hooks/useTables"
import { reactive, ref } from "vue"
const showFormVisible = ref(false)
const dialogVisible = ref(false)
const cancelfn = () => {
    dialogVisible.value = false
    edID.value = 0
}
const addFn = () => {
    dialogVisible.value = true
    edID.value = 0
}
const confirmfn = () => {
    dialogVisible.value = false
    queryList()
    edID.value = 0
}
let edID = ref(0)
let assignID = ref(0)
//编辑
const editFn = (id: number) => {
    dialogVisible.value = true
    console.log(id);
    edID.value = id
}
const input = reactive<IroleParams>({
    keyword: ""
})
const { tableData, pageparams, handleSizeChange, handleCurrentChange, queryList } = useTable(http.admin.listHttp, input)

const seachFn = () => {
    console.log("搜索", input.keyword);
    queryList()
}
const changeStatus = (row: any) => {
    console.log("row:", row.id, row.status);
    http.admin.UpdateStatusAPI(row.id, row.status).then(
        res => {
            if (res.code == 200) {
                ElMessage.success("修改成功")
            } else {
                ElMessage.error("修改失败");
                row.status = row.status === 1 ? 0 : 1;
            }
        }
    ).catch(err => {
        console.log("err:", err);
        row.status = row.status === 1 ? 0 : 1;
    })
}

const fpFn = ()=>{
    showFormVisible.value = true
} 
const qdfn = ()=>{
    showFormVisible.value = false
}
const qxfn = (id: number)=>{
    showFormVisible.value = false
    assignID.value = id
}
</script>

<style lang="scss" scoped>
.admin {
    width: 100%;

    .admin-in {
        width: 97%;
        margin: auto;

        .seach {
            margin: 30px 0 20px 0;
            box-shadow: 0 0 5px 1px var(--el-input-border-color, var(--el-border-color));
            border-radius: 3px;
            color: #737478;
        }

        .sj {
            box-shadow: 0 0 5px 1px var(--el-input-border-color, var(--el-border-color));
            margin: 10px 0 20px 0;
            line-height: 60px;
            border-radius: 3px;
            color: #737478;

            .sj-in {
                width: 97%;
                margin: auto;
                display: flex;
                justify-content: space-between;
            }

            :deep(.el-button) {
                margin-top: 15px;
            }
        }

        .sx {
            width: 97%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            line-height: 60px;

        }

        .user {
            margin-left: 60px;
            padding-bottom: 20px;
        }
    }
}

:deep(.el-table__cell) {
    text-align: center;
}

:deep(.inp) {
    width: 220px;
}

:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
}

:deep(.el-breadcrumb) {
    line-height: 40px;
    padding-left: 19px;
    border-bottom: 1px solid #eeee;
    // border: 1px solid #000;
}
</style>